<template>
  <el-dialog
    :close-on-click-modal="false"
    :custom-class="footShow ? 'w_form' : ''"
    :title="dialogTitle"
    :visible.sync="dialogFormShow"
    @close="closeDialog"
    class="my_dialog"
    width="70%"
  >
    <slot />
    <span
      class="dialog-footer"
      slot="footer"
      v-if="footShow"
    >
      <el-button
        @click="dialogFormConfirm"
        size="mini"
        type="danger"
      >确 定</el-button>
      <el-button
        @click="dialogFormClose"
        size="mini"
      >取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
    data(){
      return{
        $dialog: '',
        dialogFormShow: false
      }
  },
  props:{
    dialogTitle: {
      type: String,
      default: ''
    },
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    footShow: {
      type: Boolean,
      default: true
    }
  },
  watch:{
    dialogFormVisible: {
      handler(val){
          // 监听dialogFormVisible值变化组件显示隐藏
          this.dialogFormShow = val
          this.$dialog = document.querySelector('.el-dialog__body')
          if (this.$dialog && !val) {
            this.$dialog.scrollTop = 0
          }
      },
      immediate: true
    }
  },
  methods: {
    closeDialog(){
      this.$emit('dialog-cancel')
    },
    dialogFormConfirm(){
      this.$emit('dialog-confirm')
    },
    dialogFormClose(){
      this.$emit('dialog-cancel')
    }
  }
}
</script>
<style scoped>
.my_dialog .el-select {
  width: 100%;
}
.w_form .el-dialog__body {
  padding: 25px 105px 25px 25px;
}
.w_form .el-dialog__footer {
  text-align: center;
}
</style>
